<template>
	<div class="app-container">
		<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true">
			<div class="ones">
				<fieldset class="fieldset">
					<legend class="legend">创建订单</legend>
					<el-form-item label="订单号" prop="orderNumber">
						<el-input v-model="addFormData.orderNumber" placeholder="请输入订单号"> </el-input>
					</el-form-item>
					<!-- <el-form-item label="应收金额" prop="amountReceivable">
						<el-input type="number" min="0" v-model="addFormData.amountReceivable"
							placeholder="请输入应收金额"></el-input>
					</el-form-item> -->
					<el-form-item label="运费" prop="amountDelivery">
						<el-input type="number" min="0" v-model="addFormData.amountDelivery"
							placeholder="请输入运费"></el-input>
					</el-form-item>

					<el-form-item label="订单来源" prop="orderSource">
						<el-select v-model="addFormData.orderSource" placeholder="请选择">
							<el-option v-for="item in dict.type.sys_order_type" :key="item.id" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="交期天数">
						<el-input type="number" min="0" v-model="addFormData.deliveryDay" placeholder="请输入"></el-input>
					</el-form-item>
					<!-- <el-form-item label="理赔金额" prop="amountCompensate">
						<el-input type="number" min="0" v-model="addFormData.amountCompensate" placeholder="请输入理赔金额"
							:disabled="!checkRole(['caiwu'])"></el-input>
					</el-form-item> -->
					<el-form-item label="是否加急" prop="priority">
						<el-radio-group v-model="addFormData.priority">
							<el-radio v-for="(item, index) in dict.type.sys_isno" :key="index" :label="item.value"
								:value="item.value">
								{{ item.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否生产" prop="produce">
						<el-radio-group v-model="addFormData.produce">
							<el-radio v-for="(item, index) in dict.type.sys_isno" :key="index" :label="item.value"
								:value="item.value">
								{{ item.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>

				</fieldset>
				<fieldset class="fieldset">
					<legend class="legend">客户信息</legend>
					<el-form-item label="客户名称" prop="customerName">
						<el-autocomplete v-model="addFormData.customerName" :fetch-suggestions="handleSearchCustomer"
							placeholder="客户名称" :trigger-on-focus="false" value-key="customerName"
							@select="handleSelectCustomer"></el-autocomplete>
					</el-form-item>
					<el-form-item label="联系人" prop="customerPerson">
						<el-input 
						
						v-model="addFormData.customerPerson" placeholder="请输入联系人" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="customerPhone">
						<el-input type="text" maxlength="11"  
							v-model="addFormData.customerPhone" placeholder="请输入联系电话" clearable></el-input>
					</el-form-item>
					<el-form-item label="省市区" prop="selectedRegion">
						<el-cascader :options="regionData" v-model="addFormData.selectedRegion"
							@change="handleRegionChange" placeholder="请选择省/市/区"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" prop="customerAddress">
						<el-input v-model="addFormData.customerAddress" placeholder="请输入详细地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="是否月结" prop="billMonth">
						<el-radio-group v-model="addFormData.billMonth">
							<el-radio v-for="(item, index) in dict.type.sys_costomer_type" :key="index"
								:label="item.label" :value="item.value">
								{{ item.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</fieldset>
				<fieldset class="fieldset">
					<legend class="legend">快递信息</legend>
					<el-form-item label="快递方式" prop="deliveryMode">
						<el-radio-group v-model="addFormData.deliveryMode" size="mini">
							<el-radio v-for="(item, index) in dict.type.self_delivery_mode" :key="index"
								:label="item.value">{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="联系人" prop="deliveryPerson">
						<div class="div" style="display: flex;align-items: center;">
							<el-input v-model="addFormData.deliveryPerson" placeholder="联系人" clearable
								:fetch-suggestions="handleSearchCustomer" :trigger-on-focus="false"
								value-key="customerName" @select="handleSelectCustomer2"
								style="width: 140px;"></el-input>
							<el-button type="primary" @click="copy">复用客户信息</el-button>
						</div>
					</el-form-item>
					<el-form-item label="联系电话" prop="deliveryPhone">
						<el-input 
						maxlength="32"
						v-model="addFormData.deliveryPhone" placeholder="请输入联系电话"
							clearable></el-input>
					</el-form-item>
					<el-form-item label="省市区" prop="selectedRegion">
						<el-cascader :options="regionData" v-model="addFormData.selectedRegion2"
							@change="handleRegionChange2" placeholder="请选择省/市/区"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" prop="deliveryAddress">
						<el-input v-model="addFormData.deliveryAddress" placeholder="请输入详细地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="运输要求" prop="deliveryAsk">
						<el-input v-model="addFormData.deliveryAsk" placeholder="请输入运输要求" clearable></el-input>
					</el-form-item>
					<el-form-item label="发货备注" prop="deliveryRemark">
						<el-input v-model="addFormData.deliveryRemark" placeholder="请输入发货备注" clearable></el-input>
					</el-form-item>
				</fieldset>
			</div>
			<el-table tooltip-effect="light" :data="addFormData.productList" :summary-method="getSummaries"
				show-summary>
				<el-table-column label="产品名称" prop="productName" min-width="150">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'"
							:rules="addFormRules.productName" class="all">
							<el-select 
							v-model="scope.row.productName" 
							filterable 
							value-key="id" 
							placeholder="请选择"
								@change="pestChange($event, scope.$index)">
								<el-option v-for="item in optionsList" :key="item.id" :label="item.productName"
									:value="item">
								</el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="单价(元/㎡)" prop="price" width="90">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.price'"
							:rules="addFormRules.price" class="all">
							<el-input v-model="scope.row.price" placeholder="请输入" @blur="isinput(scope.row)">
							</el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="产品件数" prop="productCount" width="90">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.productCount'"
							:rules="addFormRules.productCount" class="all">
							<el-input v-model="scope.row.productCount" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="客户提供框内尺寸(高mm)" prop="sizeHeight" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.sizeHeight'"
							:rules="addFormRules.sizeHeight" class="all">
							<el-input v-model="scope.row.sizeHeight" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="客户提供框内尺寸(宽mm)" prop="sizeWidth" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.sizeWidth'"
							:rules="addFormRules.sizeWidth" class="all">
							<el-input v-model="scope.row.sizeWidth" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="安装尺寸 (+mm)" prop="sizeAdd" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.sizeAdd'"
							:rules="addFormRules.sizeAdd" class="all">
							<el-input v-model="scope.row.sizeAdd" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>

				<el-table-column label="减尺尺寸高 (-mm)" prop="sizeSubHeight" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.sizeSubHeight'"
							:rules="addFormRules.sizeSubHeight" class="all">
							<el-input v-model="scope.row.sizeSubHeight" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>

				<el-table-column label="减尺尺寸宽 (-mm)" prop="sizeSubWidth" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.sizeSubWidth'"
							:rules="addFormRules.sizeSubWidth" class="all">
							<el-input v-model="scope.row.sizeSubWidth" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>

				

				<el-table-column label="安装尺寸(高mm)" prop="sizeHidthWx" width="80">
					<template slot-scope="scope">
						<div class="notext">
							{{ getSizeHidthWx(scope.row) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="安装尺寸(宽mm)" prop="sizeWidthWx" width="80">
					<template slot-scope="scope">
						<div class="notext">
							{{ getSizeWidthWx(scope.row) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="减尺后(高mm)" prop="sizeHeightSub" width="80">
					<template slot-scope="scope">
						<div class="notext" style="color: red;font-weight: bold;">
							{{ getSizeHeightSub(scope.row) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="减尺后(宽mm)" prop="sizeWidthSub" width="80">
					<template slot-scope="scope" >
						<div class="notext" style="color: red;font-weight: bold;">
							{{ getSizeWidthSub(scope.row) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="小计㎡" prop="areasSum" width="100">
					<template slot-scope="scope">
						<div class="notext">
							{{ getAreasSum(scope.row) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="小计￥元" prop="totalAmount" width="100">
					<template slot-scope="scope">
						<div class="notext">
							{{ getTotalAmount(scope.row) }}
						</div>
					</template>
				</el-table-column>

				<el-table-column label="外框颜色" prop="color" width="120">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.color'"
							:rules="addFormRules.color" class="all">
							<el-select v-model="scope.row.color" filterable value-key="id" placeholder="请选择">
								<el-option v-for="item in dict.type.sys_product_color" :key="item.id"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>


				<el-table-column label="叶片颜色" prop="bladeColor" width="120">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.bladeColor'"
							:rules="addFormRules.bladeColor" class="all">
							<el-select v-model="scope.row.bladeColor" filterable value-key="id" placeholder="请选择">
								<el-option v-for="item in dict.type.sys_product_color" :key="item.id"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="叶片类型" prop="bladeType" width="100">
					<template slot-scope="scope">
						<div class="notext">
							{{ scope.row.bladeType }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="驱动方式" prop="driveMode" width="100">
					<template slot-scope="scope">
						<div class="notext">
							{{ scope.row.driveMode }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="玻璃数量" prop="glassCount" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.glassCount'"
							:rules="addFormRules.glassCount" class="all">
							<el-select v-model="scope.row.glassCount" placeholder="请选择">
								<el-option v-for="item in scope.row.glassCountList" :key="item" :label="item"
									:value="item">
								</el-option>
							</el-select>
						</el-form-item>

					</template>
				</el-table-column>
				<el-table-column label="生产备注" prop="remarkProd" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.remarkProd'"
							:rules="addFormRules.remarkProd" class="all">
							<el-input v-model="scope.row.remarkProd" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="玻璃备注" prop="remarkGlass" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.remarkGlass'"
							:rules="addFormRules.remarkGlass" class="all">
							<el-input v-model="scope.row.remarkGlass" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="项目备注" prop="remark" width="100">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.remark'"
							:rules="addFormRules.remark" class="all">
							<el-input v-model="scope.row.remark" placeholder="请输入"> </el-input>
						</el-form-item>
					</template>
				</el-table-column>
				<!-- 客户提供 加安装尺寸 等于 安装尺寸（高mm）-->
				<!-- 客户提供 减去减尺尺寸 等于 减尺后（高mm）-->

				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="150">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit"
						 @click="handleUpdateYes(scope.row)" >增加</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete"
							@click="handleDeleteProduct(scope.$index)" >删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<fieldset class="fieldset" style="margin-top: 10px">
				<legend class="legend">订单备注</legend>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注信息" prop="remark">
							<el-input style="width: 400px;height: 60px;" v-model="addFormData.remark"
								placeholder="请输入订单备注" clearable type="textarea"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="border: 1px dashed red;">
						<el-form-item label="备注图片" @paste.native="handlePaste">
							<div style="color: red;">点击红色虚线区域可粘贴上传</div>
							<div class="imgs">
								<div class="i" v-for="(item, index) in addFormData.imgs" :key="index">
									<img :src="item" alt="">
									<i style="cursor: pointer;" class="el-icon-error"
										@click="addFormData.imgs.splice(index, 1)"></i>
								</div>
								<el-upload ref="upload" class="avatar-uploader" :action="uploadAction"
									:show-file-list="false" multiple :headers="uploadHeaders"
									:on-success="handleUploadSuccess">
									<i class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</fieldset>
			<el-form-item size="large">
				<el-button type="primary" @click="handleSubmitAdd">提交</el-button>
				<el-button @click="handleCancelAdd">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
// 添加订单

import {
	postCustomerList
} from '@/api/customer'
import {
	postOrdersAdd, getList
} from '@/api/order/order'
import {
	validMobile
} from '@/utils/validate'
import {
	regionData,
	codeToText,
	pcaTextArr
} from 'element-china-area-data'
import {
	getToken
} from '@/utils/auth'
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import axios from 'axios';

export default {
	name: 'OrderAdd',
	dicts: ['self_delivery_mode', 'sys_product_color', 'sys_order_type', 'sys_isno', 'sys_costomer_type'],
	data() {

		// 验证手机号码
		const validateMobile = (rule, value, callback) => {
			if (!validMobile(value)) {
				callback(new Error('请输入正确的手机号码'))
			} else {
				callback()
			}
		}
		// 验证产品列表
		const validateProductList = (rule, value, callback) => {
			if (!value.length) {
				callback(new Error('请添加产品'))
			} else {
				callback()
			}
		}

		return {
			// 必选参数，上传的地址
			uploadAction: process.env.VUE_APP_BASE_API + '/common/upload',
			// 设置上传的请求头部
			uploadHeaders: {
				Authorization: 'Bearer ' + getToken()
			},
			// 上传的文件列表
			uploadImageList: [],
			regionData: pcaTextArr,
			addFormData: {
				orderNumber: '', // 订单号
				amountReceivable: '', // 应收金额
				amountDelivery: 0,
				orderSource: '',
				deliveryDay: '',
				// amountCompensate: '',
				priority: '0',
				produce: '1',

				customerName: undefined, // 客户名字
				customerPerson: undefined, // 客户联系人
				customerPhone: undefined, // 客户联系电话
				customerProvince: undefined, // 客户 省
				customerCity: undefined, // 客户 市
				customerCounty: undefined, // 客户 区/县
				customerAddress: undefined, // 客户 详细地址
				billMonth: '否',

				deliveryMode: undefined, // 快递 方式（对应字典：self_delivery_mode）
				deliveryPerson: undefined, // 快递 联系人
				deliveryPhone: undefined, // 快递 联系电话
				deliveryProvince: undefined, // 快递 省?
				deliveryCity: undefined, // 快递 市?
				deliveryCounty: undefined, // 快递 区/县?
				deliveryAddress: undefined, // 快递 详细地址?
				deliveryAsk: undefined, // 快递 运输要求?
				deliveryRemark: undefined, // 快递 发货备注?
				remark: undefined, // 订单 备注?
				selectedRegion: [],
				selectedRegion2: [],
				orderImgs: '',
				imgs: [],
				// 产品列表
				productList: [],
			},
			addFormRules: {
				orderNumber: [{
					required: true,
					message: '请输入订单号',
					trigger: 'blur'
				}],
				amountReceivable: [{
					required: true,
					message: '请输入应收金额',
					trigger: 'blur'
				}],
				orderSource: [{
					required: true,
					message: '请选择订单来源',
					trigger: 'blur'
				}],
				deliveryDay: [{
					required: true,
					message: '请输入交期天数',
					trigger: 'blur'
				}],
				customerName: [{
					required: true,
					message: '请输入客户名称',
					trigger: 'blur'
				}],
				customerPerson: [{
					required: true,
					message: '请输入联系人',
					trigger: 'blur'
				}],
				customerPhone: [{
					required: true,
					message: '请输入联系电话',
					trigger: 'blur'
				},
				{
					validator: validateMobile,
					trigger: 'blur'
				},
				],
				customerProvince: [{
					required: true,
					message: '请输入省',
					trigger: 'blur'
				}],
				customerCity: [{
					required: true,
					message: '请输入市',
					trigger: 'blur'
				}],
				customerCounty: [{
					required: true,
					message: '请输入区/县',
					trigger: 'blur'
				}],
				customerAddress: [{
					required: true,
					message: '请输入详细地址',
					trigger: 'blur'
				}],

				deliveryMode: [{
					required: true,
					message: '请选择快递方式',
					trigger: 'change'
				}],
				deliveryPerson: [{
					required: true,
					message: '请输入联系人',
					trigger: 'blur'
				}],
				deliveryPhone: [{
					required: true,
					message: '请输入联系电话',
					trigger: 'blur'
				},
				// {
				// 	validator: validateMobile,
				// 	trigger: 'blur'
				// },
				],
				// productList: [{
				// 	validator: validateProductList,
				// 	trigger: 'blur'
				// }],
				productName: [{
					required: true,
					message: '请选择产品',
					trigger: 'blur'
				}],
				price: [{
					required: true,
					message: '请输入单价',
					trigger: 'blur'
				}
				],
				productCount: [{
					required: true,
					message: '请输入产品件数',
					trigger: 'blur'
				}],
				sizeWidth: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				sizeHeight: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				sizeAdd: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				sizeSubWidth: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				sizeSubHeight: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				color: [{
					required: true,
					message: '选择外框颜色',
					trigger: 'change'
				}],
				bladeColor: [{
					required: true,
					message: '选择叶片颜色',
					trigger: 'change'
				}],
				// remarkProd: [{
				// 	required: true,
				// 	message: '输入生产备注',
				// 	trigger: 'blur'
				// }],
				// remarkGlass: [{
				// 	required: true,
				// 	message: '输入玻璃备注',
				// 	trigger: 'blur'
				// }],
				// remark: [{
				// 	required: true,
				// 	message: '输入项目备注',
				// 	trigger: 'blur'
				// }],

			},
			// 添加产品弹框标题
			addProductDialogTitle: '',
			// 添加产品弹框是否显示
			addProductDialogVisible: false,
			tempId: 1,
			restaurants: [],
			state: '',
			timeout: null,
			isshow: false,
			queryParams: {
				pageNum: 1,
				pageSize: 100
			},
			optionsList: []

		}
	},
	mounted() {
		this.$nextTick(() => {
			this.addFormData.productList.push({
				productId: '',//产品id
				areasBoundary: '',
				productName: '',//产品名称
				price: '',//单价(元/㎡)
				productCount: '1', //产品件数
				sizeWidth: '',//客户提供框内尺寸 宽
				sizeHeight: '',//客户提供框内尺寸 高
				sizeAdd: '', //安装尺寸 (+mm)"
				sizeSubWidth: '', //减尺尺寸宽(-mm)
				sizeSubHeight: '', //减尺尺寸高(-mm)
				sizeHidthWx: '',//安装尺寸(高mm)
				sizeWidthWx: '',//安装尺寸(宽mm)
				sizeHeightSub: '',  //减尺后(高mm)
				sizeWidthSub: '', //减尺后(宽mm)
				areasSum: '', //小计㎡
				totalAmount: '', //小计￥元
				color: '', //外框颜色
				bladeColor: '', //叶片颜色
				bladeType: '',//叶片类型
				driveMode: '', //驱动方式
				glassCount: '', //玻璃数量
				remarkProd: '', //生产备注
				remarkGlass: '',//玻璃备注
				remark: '', //项目备注
				priceWarn: '', //预警价
				batchType: '', //批次编号组
				tableName: '', //表头
				productProcessFlag:''

				// warnBelow:'0', //1是
			})
		})
		getList(this.queryParams).then((response) => {
			this.optionsList = response.rows
		})
	},
	computed: {
		getSizeHidthWx() {
			return (data) => {
				if (data.sizeHeight) {
					data.sizeHidthWx = parseInt(parseFloat(data.sizeHeight)) + parseInt(parseFloat(data.sizeAdd))
					return data.sizeHidthWx
				} else {
					return 0
				}
			}
		},
		getSizeWidthWx() {
			return (data) => {
				if (data.sizeWidth) {
					data.sizeWidthWx = parseInt(parseFloat(data.sizeWidth)) + parseInt(parseFloat(data.sizeAdd))
					return data.sizeWidthWx
				} else {
					return 0
				}
			}
		},
		getSizeHeightSub() {
			return (data) => {
				if (data.sizeHeight) {
					data.sizeHeightSub = parseInt(parseFloat(data.sizeHeight)) - parseInt(parseFloat(data.sizeSubHeight))
					return data.sizeHeightSub
				} else {
					return 0
				}
			}
		},
		getSizeWidthSub() {
			return (data) => {
				if (data.sizeWidth) {
					data.sizeWidthSub = parseInt(parseFloat(data.sizeWidth)) - parseInt(parseFloat(data.sizeSubWidth))
					return data.sizeWidthSub
				} else {
					return 0
				}
			}
		},
		getAreasSum() {
			return (data) => {
				if (data.sizeHeight && data.sizeWidth && data.productCount ) {
					let a = (parseInt(parseFloat(data.sizeHeight)) + parseInt(parseFloat(data.sizeAdd))) * (parseInt(parseFloat(data.sizeWidth)) + parseInt(parseFloat(data.sizeAdd)))
					let b = parseFloat(data.areasBoundary) * 1000000
					if (a > b) {
						data.areasSum = (parseFloat(a / 1000000) * data.productCount).toFixed(2)
						return data.areasSum
					} else {
						data.areasSum =   (parseFloat(data.areasBoundary) * parseFloat(data.productCount)).toFixed(2)
						return data.areasSum
					}
				} else {
					return 0
				}

			}
		},
		getTotalAmount() {
			return (data) => {
				if (data.sizeHeight && data.sizeWidth && data.areasBoundary && data.productCount && data.price) {
					let a = (parseInt(parseFloat(data.sizeHeight)) + parseInt(parseFloat(data.sizeAdd))) *
						(parseInt(parseFloat(data.sizeWidth)) + parseInt(parseFloat(data.sizeAdd)))
					let b = parseFloat(data.areasBoundary) * 1000000
					if (a > b) {
						data.totalAmount = (parseFloat(a / 1000000) * parseFloat(data.productCount) * parseFloat(data.price)).toFixed(2)
						return data.totalAmount
					} else {
						data.totalAmount = (parseFloat(data.areasBoundary) * parseFloat(data.productCount) * parseFloat(data.price)).toFixed(2)
						return data.totalAmount
					}
				} else {
					return 0.00
				}
			}
		},
	},
	methods: {
		checkPermi,
		checkRole,
		handlePaste(e) {
			let now = new Date().getTime()
			if (now - this.timeStep < 500) {
				this.$message.warning('粘贴速度太频繁！请稍后再试');
				return
			}
			this.timeStep = now
			var clipboardData = e.clipboardData; // IE
			if (!clipboardData) {
				//chrome
				clipboardData = e.originalEvent.clipboardData;
			}
			var items = '';
			items = (e.clipboardData || window.clipboardData).items;
			let file = null;
			if (!items || items.length === 0) {
				this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');
				return;
			}
			// 搜索剪切板items
			for (let i = 0; i < items.length; i++) {
				// 限制上传文件类型
				if (items[i].type.indexOf('image') !== -1) {
					file = items[i].getAsFile();
					break;
				}
			}
			// 判断上传图片尺寸
			//判断是否超出上传数量
			// if (this.fileList.length >= this.limit) {
			// 	this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
			// 	return
			// }
			if (file) {
				this.$refs.upload.handleStart(file); // 将粘贴过来的图片加入预上传队列
				this.$refs.upload.submit(); // 提交图片上传队列
			} else {
				this.$message.error("粘贴内容非图片");
			}
		},
		//图片上传成功
		handleUploadSuccess(response, file, fileList) {
			this.addFormData.imgs.push(response.url)
		},

		isinput(row) {
			if ((row.price - row.priceWarn) < 0) {
				this.$alert('当前产品单价已低于产品预警价!!!', '提示', {
					confirmButtonText: '确定',
					callback: action => {
					}
				});
				// row.warnBelow  = '1'
			} else {
				// row.warnBelow  = '0'
				console.log('222');
			}
		},
		pestChange(e, index) {
			console.log(e);
			e.color = this.addFormData.productList[index].color
			e.bladeColor = this.addFormData.productList[index].bladeColor
			let data = this.addFormData.productList[index]
			Object.keys(data).forEach(key => {
				data[key] = e[key]
			})
			this.addFormData.productList[index].productProcessFlag = e.processFlag
			this.addFormData.productList[index].productCount = 1
			this.addFormData.productList[index].productId = e.id
			this.addFormData.productList[index].glassCount = JSON.parse(e.glassCount)[0]
			this.addFormData.productList[index].glassCountList = JSON.parse(e.glassCount)
			// this.addFormData.productList[index].warnBelow = '0'

		},
		// 上传商品主图成功

		handleRegionChange(value) {
			// 当选择发生变化时，处理省市区的变更逻辑
			this.addFormData.customerProvince = value[0]
			this.addFormData.customerCity = value[1]
			this.addFormData.customerCounty = value[2]
		},
		handleRegionChange2(value) {
			// 当选择发生变化时，处理省市区的变更逻辑
			this.addFormData.deliveryProvince = value[0]
			this.addFormData.deliveryCity = value[1]
			this.addFormData.deliveryCounty = value[2]
		},
		copy() {
			this.addFormData.deliveryPerson = this.addFormData.customerPerson
			this.addFormData.deliveryPhone = this.addFormData.customerPhone
			this.addFormData.deliveryProvince = this.addFormData.customerProvince
			this.addFormData.deliveryCity = this.addFormData.customerCity
			this.addFormData.deliveryCounty = this.addFormData.customerCounty
			this.addFormData.deliveryAddress = this.addFormData.customerAddress
			this.addFormData.selectedRegion2 = [this.addFormData.deliveryProvince, this.addFormData.deliveryCity, this
				.addFormData.deliveryCounty
			]
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				} else if (index === 2) {
					const values = data.reduce((prev, curr) => {
						const value3 = Number(curr.productCount);
						if (!isNaN(value3)) {
							return prev + value3;
						} else {
							return prev;
						}
					}, 0)
					sums[index] = values + '件'
				}
				else if (index === 12) {
					//共多少m2
					sums[index] = data.reduce((prev, curr) => {
						const value3 = Number(curr.areasSum);
						if (!isNaN(value3)) {
							return prev + value3;
						} else {
							return prev;
						}
					}, 0).toFixed(2);

				} else if (index === 13) {
					// sums[index] = '金额合计';
					sums[index] = data.reduce((prev, curr) => {
						const value3 = Number(curr.totalAmount);
						if (!isNaN(value3)) {
							return prev + value3
						} else {
							return prev
						}
					}, 0).toFixed(0);
					this.addFormData.amountReceivable = sums[index]

				} else {
					sums[index] = '-';
					return;
				}
			});
			return sums;
		},
		async loadAll() {
			const result = await postCustomerList({
				pageNum: 1,
				pageSize: 1000000
			})
			if (result) {
				let list = result.rows.map(item => {
					return {
						value: item.customerName,
						phone: item.contactPhone
					}
				})
				return list
			}
		},
		querySearchAsync(queryString, cb) {
			var restaurants = this.restaurants;
			var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

			clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				cb(results);
			}, 3000 * Math.random());
		},
		createStateFilter(queryString) {
			return (state) => {
				return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			};
		},
		handleSelect(item) {
			console.log(item);
		},
		// 输入客户名称时
		// 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它
		async handleSearchCustomer(queryString, callback) {
			if (queryString.trim()) {
				const result = await postCustomerList({
					customerName: queryString
				})
				// console.log(result.rows)
				callback(result.rows)
			}
		},
		// 客户名称输入框选择客户
		handleSelectCustomer(item) {
			console.log({
				...item
			})
			this.addFormData.customerPerson = item.contactPerson
			this.addFormData.customerPhone = item.contactPhone
			this.addFormData.customerProvince = item.province
			this.addFormData.customerCity = item.city
			this.addFormData.customerCounty = item.county
			this.addFormData.customerAddress = item.address
			this.addFormData.selectedRegion = [item.province, item.city, item.county]
			// this.addFormData.billMonth = item.billMonth=='是'?'1':'0'
			this.addFormData.billMonth = item.billMonth



		},
		// deliveryPerson  deliveryPhone deliveryProvince deliveryCity deliveryCounty deliveryAddress
		handleSelectCustomer2(item) {
			console.log({
				...item
			})
			this.addFormData.deliveryPerson = item.contactPerson
			this.addFormData.deliveryPhone = item.contactPhone
			this.addFormData.deliveryProvince = item.province
			this.addFormData.deliveryCity = item.city
			this.addFormData.deliveryCounty = item.county
			this.addFormData.deliveryAddress = item.address
			this.addFormData.selectedRegion2 = [item.province, item.city, item.county]
		},
		handleUpdateYes(row) {
			console.log(row, '11111111');
			this.addFormData.productList.push({
				productId: row.productId,//产品id
				areasBoundary: row.areasBoundary,
				productName: row.productName,//产品名称
				price: row.price,//单价(元/㎡)
				priceWarn: row.priceWarn,
				productCount: row.productCount, //产品件数
				sizeWidth: '',//客户提供框内尺寸 宽
				sizeHeight: '',//客户提供框内尺寸 高
				sizeAdd: row.sizeAdd, //安装尺寸 (+mm)"
				sizeSubWidth: row.sizeSubWidth, //减尺尺寸宽 (-mm)
				sizeSubHeight: row.sizeSubHeight, //减尺尺寸高(-mm)
				sizeHidthWx: '',//安装尺寸(高mm)
				sizeWidthWx: '',//安装尺寸(宽mm)
				sizeHeightSub: '',  //减尺后(高mm)
				sizeWidthSub: '', //减尺后(宽mm)
				areasSum: '', //小计㎡
				totalAmount: '', //小计￥元
				color: row.color, //外框颜色
				bladeColor: row.bladeColor, //叶片颜色
				bladeType: row.bladeType,//叶片类型
				driveMode: row.driveMode, //驱动方式
				glassCount: row.glassCount, //玻璃数量
				glassCountList: row.glassCountList, //玻璃数量
				remarkProd: '', //生产备注
				remarkGlass: '',//玻璃备注
				remark: '', //项目备注
				batchType: row.batchType, //批次编号组
				tableName: row.tableName, //表头
				productProcessFlag:row.productProcessFlag

			})
		},
		// 删除产品
		handleDeleteProduct(index) {
			this.$confirm('此操作将永久删除该产品信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				this.addFormData.productList.splice(index, 1)
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});

		},
		// 添加订单表单提交
		handleSubmitAdd() {
			console.log(this.addFormData);
			this.$refs.addFormRef.validate(async (valid) => {
				if (!valid) return
				const requestData = JSON.parse(JSON.stringify(this.addFormData))
				requestData.orderImgs = this.addFormData.imgs.toString()
				delete requestData.imgs
				this.loading = true
				await postOrdersAdd(requestData)
				this.loading = false
				const obj = {
					path: '/list'
				}
				this.$tab.closeOpenPage(obj)
				this.$message({
					message: '下单成功',
					type: 'success'
				});
			})
		},
		// 添加订单表单取消
		handleCancelAdd() {
			const obj = {
				path: '/list'
			}
			this.$tab.closeOpenPage(obj)
		},
	},
}
</script>

<style lang="scss" scoped>
.imgs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.i {
		border-radius: 6px;
		width: 120px;
		height: 120px;
		margin: 0 10px 10px 0;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			border: 1px solid #eee;
			border-radius: 4px;
			overflow: hidden;
		}

		i {
			position: absolute;
			top: -5px;
			right: -5px;
			color: #c33;
			font-size: 20px;
			z-index: 999;
		}

	}
}

.fieldset {
	border: 1px solid #eee;
	margin-bottom: 15px;
	padding-right: 0;
	padding-left: 0;
}

.legend {
	color: #606266;
	margin: 0 15px;
	font-weight: bold;
}

.pre {
	position: fixed;
	right: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.5);
}

.avatar-uploader {
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	margin: 0 10px 10px 0;
}

.avatar-uploader:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100px;
	height: 100px;
	display: block;
}



.notext {
	height: 28px;
	line-height: 28px;
	margin-bottom: 18px;
}
</style>